<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script>
        // HTML标签和浏览器地址栏只能发送 GET 请求
        //      只有 form 表单元素可以发送 GET 和 POST 请求
        /*
        后端的接口开发规范 ResfullApi 接口规范 => 减少接口地址的数量
                通过 http 请求类型 区分相同地址的不同功能

        例如：服务器提供接口 http://127.0.0.1:3000/api/users 描述和用户有关的相关操作（查询、删除、修改、添加……）
             HTTP get ==> 服务器会设置为查询方法
             HTTP post ==> 服务器会设置为添加方法
             HTTP delete ==> 服务器会设置为删除方法
             HTTP put|pacth ==> 服务器会设置为更新方法
        */
        /*
        1、测试请求: 有浏览器自动发送的 OPTIONS 和 HEAD 请求
        2、简单请求：GET、无参POST
        3、复杂请求【跨域】：
                除 GET和无参POST 以外的其它请求
                HTTP协议规则中要求，复杂请求完成跨域操作时，必须先发送测试请求，完成服务器状态测试
                浏览器在完成复杂请求跨域发送时，会自动优先发送测试请求
        */

        // axios 方法默认 http 请求是 get 类型请求
        function sendGetRequest(){
            // axios({
            //     url:"http://127.0.0.1:3000/api/users"
            // })
            axios.get("http://127.0.0.1:3000/api/users")
                .then(function(response){
                    console.log(response.data);
                })
                .catch(function(error){
                    notice({
                        icon:"error",
                        title:"请求失败"
                    })
                })
        }
        function sendPostRequest(){
            // axios({
            //     url:"http://127.0.0.1:3000/api/users",
            //     // method 是创建请求时使用的方法  默认值:get
            //     method: "post"
            // })
            axios.post("http://127.0.0.1:3000/api/users")
                .then(function(response){
                    console.log(response.data);
                })
                .catch(function(error){
                    notice({
                        icon:"error",
                        title:"请求失败"
                    })
                })
        }

        function sendPutRequest(){
            // axios({
            //     url:"http://127.0.0.1:3000/api/users",
            //     method: "put"
            // })
            axios.put("http://127.0.0.1:3000/api/users")
                .then(function(response){
                    console.log(response.data);
                })
                .catch(function(error){
                    notice({
                        icon:"error",
                        title:"请求失败"
                    })
                })
        }
    </script>
</head>
<body>
    <h1>测试</h1>
    <input type="button" value="get" onclick="sendGetRequest()">
    <input type="button" value="post" onclick="sendPostRequest()">
    <input type="button" value="put" onclick="sendPutRequest()">


</body>
</html>